<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2>
                学校姓名:{{studentName}}
                </h2>
    <h2>
                    学校地址:{{age}}
                </h2>
                <button @click="showName"></button>
    </div>
</template>

<script>
    // 组件交互相关代码，数据，方法

    /*
    1 暴露方式
    */ 
    // export const school = Vue.extend({ 
    //            data(){
                    
    //                 return {
    //                     schoolName:'三三',
    //                     address:'北京北京',
    //                 }
    //             },
    //             methods: {
    //                 showName(){
    //                     alert('123')
    //                 }
    //             },
    //         })
    // 第二种
    // export {
    //     school
    // }

    // 第三种

    // export default school

    // 本身的Vue.extend是可以省略的，因为Vue会判断传入的是什么，进行适配

    export default { 
                name:"School",
               data(){
                    
                    return {
                        schoolName:'三三',
                        address:'北京北京',
                    }
                },
                methods: {
                    showName(){
                        alert('123')
                    }
                },
            }

</script>

<style scoped>
    /* 组件的样式 */
    .demo{
        background-color: #dedede;
    }
</style>
